<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div id="app" class="container">
    <h1>通告管理客户端实现(Bootstrap/Vue/Axios)</h1>
    <div><!--内容列表区-->

        <form id="queryForm" >
            <input type="text"  name="title" id="titleId" placeholder="请输入标题">
            <input type="button" value="查询" @click="doQueryNotices">
            <input type="button" value="新增" onclick="doDisplay(true,false)">
        </form>



        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(n,i) in notices" :key="i">
                <td>{{i+1}}</td>
                <td>{{n.title}}</td>
                <td>{{n.type}}</td>
                <td>{{n.status}}</td>
                <td>{{n.createdTime}}</td>
                <td><button @click="doDeleteById(n.id)">delete</button></td>
                <td><button class="btn btn-warning btn-xs" @click="doFindById(n.id)">update</button></td>
            </tr>
            </tbody>
        </table>
        <div class="pagination">
            <button class="pre" @click="doJumpToPage" >上一页</button>
            <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
            <button class="next" @click="doJumpToPage">下一页</button>
            <form style="display: inline">
                <input type="text" name="pageCurrent" id="pageNumId" >
                <input type="button" value="跳转"  class="Jump"
                       @click="doJumpToPage"
                >

            </form>
        </div>

        <div id="noticeEditContainer" style="display: block">
            <form id="noticeEditForm">
                <input type="hidden" id="id"v-model="id">
                <div class="form-group">
                    <label for="typeId" >类型:</label>
                    <select class="form-control" v-model="type" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="title">标题:</label>
                    <input type="text" class="form-control" v-model="title" id="title" placeholder="title">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea class="form-control" v-model="content"rows="3" id="contentId">
                   </textarea>
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input type="radio" name="status" v-model="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" v-model="status" value="1"> 关闭
                    </label>
                </div>
                <button type="button" class="btn btn-primary submit" @click="doSaveOrUpdate">Submit</button>
                <button type="button" class="btn btn-primary cancel">Cancel</button>
            </form>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

</script>
</body>
</html>